<template>
    <div class="my-likes-page">
        <div class="page-tit">我的喜欢</div>
        <div class="mk-filter-row">
            <!-- <div class="lft">
                全部<span class="total">{{ total }}</span>
            </div> -->
            <div class="tab">
                <a :class="{ 'active': params.categoryId == 22 ,'has-cir':cirObj.game>0}" @click="chooseByCateId(22)">游戏<i>{{nums.praisedGameCount }}</i></a>
                <a :class="{ 'active': params.categoryId == 4 ,'has-cir':cirObj.img>0}" @click="chooseByCateId(4)">截图<i>{{nums.praisedImageCount }}</i></a>
                <a :class="{ 'active': params.categoryId == 1,'has-cir':cirObj.work>0 }" @click="chooseByCateId(1)">作品<i>{{ nums.praisedZuopinCount }}</i></a>
                <a :class="{ 'active': params.categoryId == 9 ,'has-cir':cirObj.article>0}" @click="chooseByCateId(9)">文章<i>{{ nums.praisedArticleCount }}</i></a>
                <!-- <a :class="{'active':params.categoryId==5}" @click="chooseByCateId(5)">短视频</a> -->
            </div>
            <div class="filter-bx">
                <div class="seach-bx">
                    <form onsubmit="return false;">
                        <input type="text" placeholder="搜索" @keypress.enter="onEnterSearch" v-model="params.keyword"><i
                            v-if="params.keyword" @click="params.keyword = ''"
                            class="clear-by-search"></i>
                    </form>
                </div>
                <!-- <div class="mk-cus-ddl">
                    <span class="cur">{{ categoryType }}</span>
                    <div class="sub-dd-block">
                        <ul class="sub-ddls">
                            <li @click="categoryType = '全部'"><a>全部</a></li>
                            <li @click="categoryType = '游戏'"><a>游戏</a></li>
                            <li @click="categoryType = '作品'"><a>作品</a></li>
                            <li @click="categoryType = '截图'"><a>截图</a></li>
                            <li @click="categoryType = '短视频'"><a>短视频</a></li>
                        </ul>
                    </div>
                </div> -->
            </div>
        </div>
        <LikeGame :data="list" v-if="params.categoryId == 22" />
        <LikeImages :data="list" v-if="params.categoryId == 4 && list.length > 0" />
        <LikeWork :data="list" v-if="params.categoryId == 1" />
        <LikeArticle :data="list" v-if="params.categoryId == 9" />
        <LikeVideos :data="list" v-if="params.categoryId == 5" />
        <div class="pro-bot-loading" v-if="isloading">
            <i class="el-icon-loading"></i>
        </div>
        <div class="no-more-text" v-if="!hasMore && !isloading && list.length > 0">没有更多了</div>
        <Empty text="没有找到符合条件的结果~" v-if="list.length == 0 && !isloading" />
    </div>
</template>

<script>
import Empty from '@/components/Empty'
import LikeGame from './likes/game'
import LikeImages from './likes/images'
import LikeWork from './likes/work'
import LikeArticle from './likes/article'
import LikeVideos from './likes/videos'
import api from '@/api/api'
export default {
    data() {
        return {
            cirObj:{
                img:0,
                article:0,
                game:0,
                work:0
            },
            nums:{
                article: 0,//文章分类
                articleAll: 0,//总文章数
                discover:0,//发现分类
                draft:0,//文章草稿数
                explorerArticleCount:0,//图片集文件夹
                explorerImagesCount: 0,//图片文件夹数
                explorerTotalCount:0,//文件夹总数
                fansCount: 0,//粉丝
                linggan: 0,//灵感分类
                material: 0,//材质分类
                praisedCount: 0,//点赞数
                subscribeCount:0,//关注
                publishTotalCount: 0,
                sortVideoCount: 0,
                collectCount: 0
            },
            isloading: true,
            tab: 1,
            hasMore: true,
            gap: 273,
            scrollLoaded: false,
            total: 0,
            keyword: '',
            categoryId: '',
            categoryType: '全部',
            list: [],
            params: {
                pageNum: 1,
                pageSize: 20,
                isAsc: 'desc',
                orderByColumn: 'createTime',
                keyword: '',
                categoryId: 22
            }
        }
    },
    components: { LikeGame, LikeWork, LikeArticle, LikeImages, LikeVideos, Empty },
    destroyed() {
        window.removeEventListener('scroll',this.docScroll);
    },
    methods: {
        docScroll(e){
            let that=this;
            if (that.showInfo) return
            let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight

            if (that.scrollLoaded == false) return
            if (jHeight <= 200 && that.hasMore) {
                that.scrollLoaded = false
                that.handleLoadingMore()
            }
        },
        handleLoadingMore() {
            this.params.pageNum++;
            this.queryList()
        },
        async queryStatistics(){
            let res = await api.getMemberArticleAndExplorerStatistics(localStorage.getItem('userId'));
            this.nums = res.data;
        },
        onEnterSearch(e) {
            if(e)e.target.blur();
            this.queryStatistics();
            this.params.last='';
            this.list = [];
            this.params.pageNum = 1;
            this.hasMore = true;
            this.scrollLoaded = false;
            this.queryList();
        },
        chooseByCateId(_cateId) {
            if(this.params.categoryId == _cateId)return;
            if(_cateId===4){
                this.cirObj.game=0;
                this.cirObj.img=0;
                localStorage.removeItem('CIR-FAV-GAME')
                localStorage.removeItem('CIR-FAV-IMG')
            }else if(_cateId===1){
                this.cirObj.work=0;
                localStorage.removeItem('CIR-FAV-WORK')
            }else if(_cateId===9){
                this.cirObj.article=0;
                localStorage.removeItem('CIR-FAV-ARTICLE')
            }
            this.queryStatistics();
            this.$router.replace({ path: '/likes?t=' + _cateId })
            this.params.categoryId = _cateId;
            this.params.last='';
            this.list = [];
            this.params.pageNum = 1;
            this.hasMore = true;
            this.scrollLoaded = false;

            
            this.queryList();
        },
        calculateTilt(corners){
            const{x:x1,y:y1}=corners[0];//左上
            const{x:x2,y:y2}=corners[1];// 右上
            // 计算 dy 和 dx
            const dy=y2-y1;
            const dx=x2-x1;
            //计算倾角(弧度->角度)
            const angle =Math.atan2(dy,dx)*(180 /Math.PI);
            // 返回角度
            return angle;
        },
        async queryList() {
            // const loading = this.$loading({
            //     lock: true,
            //     text: '努力加载中...',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // });


            let that = this;
            this.params.pageSize = this.params.categoryId == 22 ? 42 : 20;

            let params = Object.assign({}, this.params);
            params.type = 0;
            params.pageSize = 20;
            if (params.categoryId == 22) {
                params.pageSize = 42;
            }
            else if (params.categoryId == 5) {
                params.type = 2;
                delete params.categoryId;
            } else if (params.categoryId == 4) {
                params.type = 4;
                params.pageSize = 50;
                delete params.categoryId;
            }
            this.isloading = true;
            let result ={};

            let domainUrl=this.$imgdomainurl;

            if(params.pageNum==1){
                // if(params.type==22){
                //     this.list=[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
                // }else if(params.type==4){
                //     this.list=this.$bhelper.vlist;
                // }else{
                //     this.list=[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
                // }
            }
            if (params.type == 4) {
                params.praise=localStorage.getItem('userId');
                params.title=params.keyword;
                params.orderByColumn='praise_time';
                params.isAsc='DESC'
                result=await api.searchImgs(params);
                if(params.pageNum==1){
                    this.list=[];
                }
                result.data=result.data.images.list;
                result.data.map(item => {
                    item.show=false;item.showOther=false;
                    that.$bhelper.convertImgItem(item,that);
                })
                if(result.data.length>0)
                    this.params.last=result.data[result.data.length-1].id;
            }else{
                result=await api.myLikeList(params);
                result.data.map(item=>{
                    let _vtime=null;
                    if(item.updateTime){
                        _vtime=item.updateTime;
                    }else if(item.createTime){
                        _vtime=item.createTime;
                    }else if(item.create_time){
                        _vtime=item.create_time.replace('T',' ');
                    }
                    _vtime=Math.abs(new Date(_vtime).getTime());
                    let srcsets=[];
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
                    item.srcsets=srcsets.join(',')
                    item.lazy={
                        src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                        error: require('@/assets/loading_error.png'),
                        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                    }
                })
            }

            if(params.type == 4){
                if(params.pageNum==1)
                {
                    this.list = result.data;
                }else{
                    this.list = [...this.list, ...result.data];
                }
            }else{
                if(params.pageNum==1)
                {
                    this.list=[];
                }
                this.list = [...this.list, ...result.data];
            }

            this.total = result.total;
            let totalPage = result.total % params.pageSize == 0 ? result.total / params.pageSize : parseInt(result.total / params.pageSize) + 1
            if (result.data && (result.data.length < params.pageSize || params.pageNum >= totalPage)) {
                that.hasMore = false
            } else {
                that.hasMore = true
            }

            setTimeout(()=>{
                that.isloading = false;
            },300)
            setTimeout(()=>{
                that.scrollLoaded = true;
            },1000)
        }
    },
    mounted() {
        let token = window.localStorage.getItem('token')
        if (!token) {
            this.$parent.showLoginView = true;
            return;
        }
        
        if(localStorage.getItem('CIR-FAV-GAME')){
            this.cirObj.game=parseInt(localStorage.getItem('CIR-FAV-GAME'));
        }
        if(localStorage.getItem('CIR-FAV-ARTICLE')){
            this.cirObj.article=parseInt(localStorage.getItem('CIR-FAV-ARTICLE'));
        }
        if(localStorage.getItem('CIR-FAV-WORK')){
            this.cirObj.work=parseInt(localStorage.getItem('CIR-FAV-WORK'));
        }
        if(localStorage.getItem('CIR-FAV-IMG')){
            this.cirObj.img=parseInt(localStorage.getItem('CIR-FAV-IMG'));
        }
        if (this.$route.query.t) {
            this.params.categoryId = this.$route.query.t;
        }

        let _cateId=this.params.categoryId;
        if(_cateId==22){
            this.list=[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
        }else if(_cateId==4){
            // this.list=this.$bhelper.vlist;
        }else{
            this.list=[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
        }
        this.queryStatistics();

        this.queryList();

        window.addEventListener('scroll',this.docScroll)
    }
}
</script>

<style lang="less">
.item-move {
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.my-likes-page {
    padding-bottom: 100px;

    .page-tit {
        line-height: 37px;
        font-size: 26px;
        color: #fff;
        margin-bottom: 16px;
        font-weight: 500;
    }

    .mk-filter-row {
        display: flex;
        justify-content: space-between;
        grid-gap: 30px;
        align-items: center;

        .tab {
            font-size: 18px;
            color: #969696;
            display: flex;
            grid-gap: 30px;
            line-height: 25px;

            a {
                transition: .2s all linear;
                position: relative;
                white-space: nowrap;

                i {
                    color: #5D5C5C;
                    margin-left: 4px;
                    font-style: normal;
                    font-weight: normal;
                }

                &:not(.active):hover {
                    color: #fff;
                }

                &.active {
                    color: #fff;

                    &:after {
                        content: '';
                        height: 2px;
                        background: #11CCB1;
                        position: absolute;
                        bottom: -5px;
                        left: 5%;
                        right: 5%;
                        width: 90%;
                    }
                }
                
                &.has-cir{
                    &:before{
                        content:'';
                        position: absolute;
                        width:6px;height:6px;
                        border-radius:3px;
                        background:#11CCB1;
                        right:-9px;
                        top:3px;
                    }
                }
            }
        }

        .filter-bx {
            width: 100%;
        }

        .lft {
            color: #fff;
            font-size: 18px;

            .total {
                font-size: 16px;
                color: #5D5C5C;
                margin-left: 10px;
            }
        }

        .filter-bx {
            display: flex;
            align-items: center;

            .seach-bx {
                // margin-right: 10px;
                width: 100%;

                form {
                    display: flex;
                    background: #1C1C1E;
                    align-items: center;
                    border-radius: 8px;
                }

                input {
                    background: #1C1C1E;
                    height: 44px;
                    line-height: 44px;
                    border-radius: 8px;
                    border: none;
                    padding-left: 36px;
                    color: #fff;
                    width: 100%;
                    font-size: 14px;
                    background-image: url('../assets/pro/header/search_icon.svg');
                    background-repeat: no-repeat;
                    background-position: 14px center;
                    background-size: 16px 16px;
                }

                .clear-by-search {
                    min-width: 14px;
                    height: 14px;
                    background: url('../assets/pro/cancel_search.svg') no-repeat;
                    background-size: cover;
                    margin-right: 10px;
                    cursor: pointer;
                }
            }
        }
    }

    .mk-rd-datas {
        .h-cover-ditem {
            width: 312px;

            .cover-box {
                display: flex;

                .mlft {
                    width: 204px;
                    height: 210px;
                    border-radius: 16px;
                    margin-right: 6px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .mrt {
                    .m-cover-bx {
                        width: 102px;
                        height: 102px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        &:first-child {
                            margin-bottom: 6px;
                        }
                    }
                }
            }

            .u-bx {
                display: flex;
                align-items: center;
                margin-top: 8px;

                .avatar {
                    width: 20px;
                    height: 20px;
                    object-fit: cover;
                    margin-right: 7px;
                    border-radius: 20px;
                }

                .name {
                    font-size: 14px;
                    color: #969696;
                }
            }
        }

        //   .waf-ligan-item{
        //     position: absolute;
        //     top: 10px;
        //     left: 10px;
        //     right: 10px;
        //     bottom: 10px;
        //     font-size: 1.2em;
        //     border:1px solid #111;
        //     border-radius:16px;
        //     transition:.1s all linear;
        //     &:hover{
        //         // border:1px solid #11CCB1;
        //     }
        //     .m-img{
        //         border-radius:16px;
        //         height:100%;
        //         width:100%;
        //         object-fit: cover;
        //     }
        //     .author {
        //       position: absolute;
        //       bottom: 10px;
        //       left: 10px;
        //       background: rgba(255, 255, 255, 0.9);
        //       border-radius: 12px;
        //       padding: 10px 13px;
        //       transition: 0.1s all linear;
        //       width: 164px;
        //       cursor: pointer;
        //       &:hover {
        //         background: rgba(255, 255, 255, 1);
        //       }

        //       .ar-tit {
        //         font-size: 14px;
        //         font-weight: 500;
        //         color: #383737;
        //         line-height: 20px;
        //         margin-bottom: 5px;
        //         white-space: nowrap;
        //         overflow: hidden;
        //         text-overflow: ellipsis;
        //         background: url('../assets/pro/take_tit_icon.svg') no-repeat;
        //         background-position: left center;
        //         padding-left: 22px;
        //       }

        //       .u-box {
        //         display: flex;
        //         padding-left: 20px;

        //         .name {
        //           font-size: 14px;
        //           color: #969696;
        //           font-weight: 500;
        //         }

        //         .avatar {
        //           width: 20px;
        //           height: 20px;
        //           border-radius: 20px;
        //           margin-right: 7px;
        //         }
        //       }
        //     }
        //     .fav-btn{
        //         background-color: #11CCB1;
        //         color: #fff;
        //         height: 44px;
        //         line-height: 44px;
        //         // width:82px;
        //         position: absolute;
        //         top: 10px;
        //         right: 10px;
        //         font-size: 14px;
        //         border-radius: 12px;
        //         cursor: pointer;
        //         background-image: url('../assets/pro/un_favicon.svg');
        //         background-repeat: no-repeat;
        //         background-position: 11px center;
        //         padding-left: 35px;
        //         padding-right: 12px;
        //         &:hover {
        //           background-color: #f34972;
        //         }
        //     }

        //     .faved-btn {
        //       background-color: #fff;
        //       color: #000;
        //       height: 44px;
        //       line-height: 44px;
        //       // width:82px;
        //       position: absolute;
        //       top: 10px;
        //       right: 10px;
        //       font-size: 14px;
        //       border-radius: 12px;
        //       cursor: pointer;
        //       background-image: url('../assets/pro/faved_icon.svg');
        //       background-repeat: no-repeat;
        //       background-position: 11px center;
        //       padding-left: 35px;
        //       padding-right: 12px;
        //       opacity: 0.9;
        //       &:hover {
        //         opacity: 1;
        //       }
        //     }
        //     .select-btn{
        //       width:20px;height:20px;
        //       position: absolute;
        //       left:10px;top:10px;
        //       background:url('../assets/pro/mutiple_select_pic.svg') no-repeat;
        //       background-size:cover;
        //       &.actived{
        //           background:url('../assets/pro/mutiple_selected_pic.svg') no-repeat;
        //           background-size:cover;
        //       }
        //     }
        //     .xs-img-btn {
        //       background-image: url('../assets/pro/xs_img_cion.svg');
        //       background-repeat: no-repeat;
        //       background-position: center center;
        //       width: 34px;
        //       height: 34px;
        //       position: absolute;
        //       right: 3px;
        //       bottom: 14px;
        //       background-color: #fff;
        //       border-radius: 12px;
        //       cursor: pointer;
        //       opacity: 0.9;
        //       &:hover {
        //         opacity: 1;
        //       }
        //     }
        //     .hid-el{
        //       // display: none;
        //       transition:.1s all linear;
        //       opacity:0;
        //     }
        //     &:hover{
        //       .hid-el{
        //         // display: inline-block;
        //         opacity:1;
        //       }
        //     }
        // }
    }
}
</style>